<!DOCTYPE html>

<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>input事件</title>
      <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
  </head>
  <body>

    <div class="container border">
        <!-- <input type="text" onInput="" onChange="" onClick="" onBlur="" onFocus="" > -->
        <input type="text" id="first">
        <div id="second"></div>

        <script>
            let f = document.querySelector( '#first' );

            f.addEventListener( 'input' , e => {
                console.log( 'input: ', e.target.value );
                document.querySelector( '#second' ).innerHTML = e.target.value ;
            } , false );

            f.addEventListener( 'change' , e => {
                console.log( 'change: ', e.target.value );
            } , false );
        </script>
    </div>

  </body>
</html>